<template>
    <el-pagination
        @size-change="sizeChange"
        @current-change="pageChange"
        :pager-count="5"
        :current-page="page.pageIndex"
        :page-sizes="page.pageSizes"
        :page-size="pageSize"
        :layout="layout"
        class="base-page"
        :total="totalRows">
    </el-pagination>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import {Emit, Prop} from "vue-property-decorator";

import PagesModel from "./pages.model";
import {PageEmitEnum} from "./page-emit.enum";

@Component({components: {}})
export default class Pages extends Vue {
    
    /*每页条数*/
    @Prop({type: Number, required: true})
    private pageSize;
    /*当前页*/
    @Prop({type: Number, required: false})
    private pageIndex;
    /*总条数*/
    @Prop({type: Number, required: true})
    private totalRows;
    
    /*分页的数据模型*/
    public PagesModel: PagesModel = new PagesModel();
    
    /**
     * 计算属性（分页数据）
     */
    get page() {
        return {...this.PagesModel, pageSize: this.pageSize, pageIndex: this.pageIndex, totalRows: this.totalRows}
    }
    
    /**
     * 计算属性（分页布局方式）
     */
    get layout() {
        if (this.totalRows / this.pageSize <= 10) {
            return 'prev, pager, next';
        } else {
            return this.page.layout;
        }
    }
    
    /**
     * 生命周期created
     */
    private created() {
    }
    
    /**
     * 生命周期mounted
     */
    private mounted() {
    }
    
    /**
     * 每页数量切换事件响应
     */
    @Emit(PageEmitEnum.sizeChange)
    public sizeChange(val: number): PagesModel {
        this.page.pageSize = val;
        return {pageSize: val, pageIndex: this.page.pageIndex};
    }
    
    /**
     * 当前页改变事件响应
     */
    @Emit(PageEmitEnum.pageChange)
    public pageChange(val: number): PagesModel {
        this.page.pageIndex = val;
        return {pageIndex: val, pageSize: this.page.pageSize};
    }
    
}
</script>
<style lang="scss">
.base-page.el-pagination {
    height: 50px;
    line-height: 50px;
    display: inline-flex;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    background-color: #f7f7f7;
    border: 1px solid #e4e7ed;
    border-top: none;
    
    button{
        background-color: transparent !important;
    }
    
    .el-pager {
        background-color: transparent;
        
        li.number {
            background-color: transparent;
            height: 50px;
            line-height: 50px;
        }
    }
}
</style>
